<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线性渐变</title>
    <style>
    /*第一遍理解记忆：2023-1-23*/
        .box1{
            width:200px;
            height:200px;
            background-color: aqua;  
/*1、渐变：
（1）概述：可以设置复杂的背景颜色，可以实现从一个颜色向其他颜色过渡，渐变的是图片
（2）设置：通过background-image来设置


2、线性渐变：
（1）概述：颜色沿着一条直线发生变化：
（2）设置：linear-gradient()
（3）方向：to top、to right、to bottom、to left、xxxdeg(deg表示度数)、turn表示圈
（4）可选值：
多个颜色默认情况下平均分配或者也可以手动指定渐变的分布情况
repeating-linear-gradient()可以平铺的线性渐变

*/
            background-image: linear-gradient(red,yellow); /* 红色开头，黄色结尾，中间是过渡区 */
            /*background-image: linear-gradient(to right,red,yellow);*//*红色开头，黄色结尾，中间是过渡区*/
            /*background-image: linear-gradient(turn,red,yellow);*/
            /* background-image:repeating-linear-gradient(to right red,yellow) ; */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>